<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选项卡</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>

    </style>
</head>

<body>
<!--&lt;!&ndash;导航选项卡&ndash;&gt;-->
<!--<ul class="nav nav-pills">-->
<!--<li class="active"><a href="#name1" data-toggle="pill">首页</a></li>-->
<!--<li><a href="#name2" data-toggle="pill">技能课</a></li>-->
<!--<li><a href="#name3" data-toggle="pill">岗位课</a></li>-->
<!--<li><a href="#name4" data-toggle="pill">微社区</a></li>-->
<!--</ul>-->

<ul class="nav nav-tabs">
    <li class="active"><a href="#name1" data-toggle="tab">新闻</a></li>
    <li><a href="#name2" data-toggle="tab">图片</a></li>
    <li><a href="#name3" data-toggle="tab">军事航空</a></li>
</ul>

<!--选项卡面板-->
<div class="tab-content">
    <div class='tabbable tabs-right'>
        <div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->
            <p>
                习近平视察军委联合作战指挥中心
            </p>

            <p>习近平贺劳尔·卡斯特罗 网信座谈会 这三年
            </p>

            <p> 李克强:双创示范基地要有"里子" 主持会议
            </p>

            <p>新闻联播打马赛克 习近平视察的机构有多神秘
            </p>

            <p>外交部回应若朝鲜再进行核试验会否加强制裁
            </p>
        </div>
        <div class="tab-pane fade " id="name2">
            <p>22222222222222222222222222222</p>
        </div>
        <div class="tab-pane fade" id="name3">
            <p>333333333333333333333333333333333333333</p>
        </div>
        <div class="tab-pane fade" id="name4">
            <p>4444444444444444444444444444444444444444</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src='js/bootstrap.min.js'></script>
<script>


    //$('#myTabs a[href="#profile"]').tab('show')   // 通过名字选择tab
    //$('#myTabs a:first').tab('show')              // 选择第一个tab
    //$('#myTabs a:last').tab('show')              // 选择最后一个tab
    //$('#myTabs li:eq(2) a').tab('show')        // 选择第三个tab (索引从0开始)


    //hide.bs.tab (在tab即将隐藏还未隐藏之前触发)
    //show.bs.tab (在tab即将显示还未显示之前触发)
    //hidden.bs.tab (在tab完全隐藏之后,css动画也要结束才触发)
    //shown.bs.tab (在tab完全显示之后,css动画也要结束才触发)

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        alert(1);
    })
</script>
</body>
</html>